<template>
  <div class="banner pt42" :style="bdata.bkImage">
    <ul class="banner_warp_item">
      <li class="banner_warp_item_h2">
        <h2>{{ bdata.list.title }}</h2>
      </li>
      <li class="banner_warp_item_p">
        <p>
          {{ bdata.list.content }}
        </p>
      </li>
      <li class="banner_warp_item_botton">
        <!-- 插槽 -->
        <slot></slot>
        <!-- <button class="banner_warp_item_bot">免费试用</button>
          <button class="banner_warp_item_two">视频介绍</button> -->
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "banner",
  props: ["bdata"],
};
</script>

<style scoped>
.banner {
  padding: 10px 15px 15px 15px;
  box-sizing: border-box;
}
.banner_warp_item {
  padding-top: 15px;
}
.banner_warp_item_h2 {
  color: #1d2845;
  font-size: 1.3em;
  margin-top: 45px;
}
.banner_warp_item_p > p {
  color: #6f7b8e;
  font-size: 1.2em;
  padding: 35px 0;
  width: 63%;
}
.banner_warp_item_botton {
  text-align: center;
  margin-top: 100px;
  margin-bottom:30px ;
}
.banner_warp_item_bot,
.banner_warp_item_two {
  background: #077af1;
  outline: none;
  padding: 8px 80px;
  border-radius: 6px;
  color: #fff;
  border: none;
  font-size: 1.1em;
}
.banner_warp_item_two {
  background: #fff;
  color: #077af1;
  border: 1px solid #077af1;
  margin-top: 25px;
}
</style>